<style scoped>
    #page-service {
        background: #f4f4f4;
    }
    .m-service-box {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
        background: #fff;
        font-family: "Microsoft Yahei";
        box-sizing: border-box;
        border-bottom: 1px solid #e6e6e6;
    }
    .m-service-box > *{
        padding: 0 10px;
    }

    .m-service-title {
        width: 100%;
        height: 44px;
        line-height: 44px;
        box-sizing: border-box;
        color: #5e5e5e;
        font-size: 15px;
        border-bottom: 1px solid #e6e6e6;
    }
    .m-service-content img {
        width: 100%;
    }
    .m-service-content a {
        color: inherit;
        /*display: block;*/
    }
    .m-service-more {
        position: relative;
        color: #db3752;
        border: none;
    }
    .m-service-more .m-service-title {
        color: currentColor;
    }
    .m-service-more .m-service-content a {
        position: absolute;
        line-height: 44px;
        height: 44px;
        padding-right: 15px;
        right: 0;
        top:0;
        width: calc(100% - 25px);
        width: -webkit-calc(100% - 25px);
        text-align: right;
    }
    .lineico19:before {
        content: '\e635';
        font-size: 16px;
        margin-right: 2px;
    }
    .m-service-hotwrap {
        height: 100%;
        background: #f4f4f4;
    }
    .m-service-hotwrap .m-service-title .m-service-title {
        color: #303030;
    }
    .m-service-hotwrap .m-service-title,.m-service-hotwrap .m-service-content {
        padding: 0;
    }
    .m-service-tips .m-service-content {
        font-size: 14px;
        line-height: 18px;
        color: #5e5e5e;
        padding: 10px 0 16px 0;
    }
    .m-service-tips .m-service-content span.m-service-hottitle {
        color: #db3752;
        display: block;
        padding: 10px 0 2px 0;
    }
    .m-service-hotwrap .m-service-box,.m-service-hotwrap .m-service-more .m-service-title {
        border: none;
    }
    .m-service-hotwrap .m-service-box {
        padding: 0 10px;
    }
    .m-service-box .m-service-more {
        color: #db3752;
    }
    .m-service-feedback .m-service-title ,.m-service-feedback .m-service-content {
        border: none;
        height: 45px;
    }
    .m-service-feedback .m-service-title {

    }
    .m-service-feedback .m-service-content {
        text-align: center;
        color: #8f8f8f;
    }
    .feedback-btn {
        display: inline-block;
        width: 48%;
        height: 30px;
        border: 1px solid #666;
        border-radius: 6px;
        color: #3e3e3e;
        line-height: 30px;
        font-size: 14px;
        text-align: center;
        box-sizing: border-box;
        transition: 1s ease all;
        -webkit-transition: 1s ease all;
    }
    .feedback-btn i {
        display: inline-block;
        width: 18px;
        height: 18px;
        position: relative;
        margin-right: 6px;
    }
    .feedback-btn i::before {
        display: block;
        content: '';
        width: 18px;
        height: 18px;
        position: absolute;
        left: 0;
        top: 3px;
        background: url("");
        background-size: 100%;
    }
    .good-feedback-btn i::before{
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }
</style>
<template>
    <div class="page-service page-wrap" id="page-service">
        <header-component :page-name="pageName"></header-component>

        <div class="m-user" id="userDetail">
            <div class="m-simpleHeader">
                <a href="javascript:;" class="m-simpleHeader-back"><i class="ico ico-back"></i></a>
                <h1>服务中心</h1>
            </div>
            <section style="display: block" class="m-service-hotwrap">
                <div class="m-service-box m-service-tips">
                    <div class="m-service-title">{{data.title}}</div>
                    <!--<div class="m-service-title">众联寻宝提醒您：保护自身利益，避免损失</div>-->
                    <div id="serviceContent" class="m-service-content" v-html="data.content">
                        <!--<span class="m-service-hottitle">签收问题</span>签收时请慎重，尽量本人签收，签收时务必仔细检查商品，如：外包装是否被开封，商品是否破损，配件是否缺失，功能是否正常。在确保无误后再签收，以免产生不必要的纠纷。若有任何疑问，请及时拨打客服电话反馈信息，若因用户未仔细检查商品即签收后产生的纠纷，一元拼宝概不负责，仅承担协调处理的义务；-->
                        <!--<span class="m-service-hottitle">保修问题</span>用户所获商品，相关商品质量及保修问题请直接联系生产厂家；-->
                        <!--<span class="m-service-hottitle">收货信息填写错误问题</span>若因您的地址填写错误、联系方式填写有误等情况造成商品无法完成投递或被退回，所产生的额外费用及后果由用户负责；-->
                        <!--<span class="m-service-hottitle">配送延迟问题</span>如因不可抗拒的自然原因，如地震、洪水等，所造成的商品配送延迟，一元拼宝不承担责任；-->
                        <!--<span class="m-service-hottitle">温馨提示</span>若商品已签收，则说明商品配送正确无误且不存在影响使用的因素，一元拼宝有权不受理换货申请。-->
                    </div>
                </div>

                <div class="m-service-box m-service-feedback">
                    <div class="m-service-title">本次回答是否对您有帮助</div>
                    <div class="m-service-content" style="padding-top: 10px">
                        <div v-if="show===0" @click="this.show=1">
                            <a class="feedback-btn good-feedback-btn" @click="cnzz(data.type+'|'+data.title+'|有帮助')"><i></i>有帮助</a>
                            <a class="feedback-btn bad-feedback-btn" @click="cnzz(data.type+'|'+data.title+'|没帮助')"><i></i>没帮助</a>
                        </div>
                        <p class="feedback-text" v-if="show===1" style="font-size: 14px;padding-top: 4px">感谢您的反馈，我们会继续努力的</p>
                    </div>
                </div>

                <div class="m-service-box m-service-more">
                    <div class="m-service-title">需要更多帮助？</div>
                    <div class="m-service-content">
                        <a :href="Config.serverUrl" class="m-call"><i class="ifont">&#xe613;</i>联系客服</a>
                    </div>
                </div>
            </section>
        </div>
    </div>
</template>
<script>
    import headerComponent from '../components/header'
    import Request from '../config/request'
//    import Config from '../config/config'
    module.exports = {
        data() {
            return {
                pageName:'服务中心',
                qaid: this.$route.query.qaid,
                data: {},
                show: 0,
                Config:Config
            }
        },
        components:{
            headerComponent
        },
        created(){
            this.$dispatch('isLoading', true);
        },
        async ready() {
            let res = await Request.get(Config.apiDomain+'/index/getQuestion?id='+this.qaid)
            this.data = res.data;
            this.$dispatch('isLoading', false);
        },
        beforeDestroy() {

        },
        methods: {
            back(){
                this.statusPop=false;
                history.go(-1)
            }
        }
    }
</script>
